<template>
  <div class="content">
    <!-- 面包屑 -->
    <bread-crumb :title="indexId.name"></bread-crumb>
    <div class="f-sb">
      <!-- 左边区域 -->
      <div class="new-left">
        <div style="margin-top: 5px"></div>
        <!-- 标题栏   开始执行循环 -->
        <div class="f-c-c" style="margin: 10px 0" v-for="item in sreachList" :key="item.id">
          <div class="search-content f-c-sb">
            <div class="right-content" style="width: 830px">
              <!-- 大标题 -->
              <div class="right-content-title" @click="getpush(item.id, item.articleClass)">{{ item.title }}</div>
              <!-- 时间 -->
              <div class="news-footer f-c-sb" style="width: 100%">
                <div class="news-footer-left">{{ item.createTime }}</div>
                <div class="news-footer-right f-c-st"></div>
              </div>
            </div>
          </div>
        </div>
        <loading v-show="sreachList.length == 0"></loading>
        <div class="pagination-container f-c-c" v-if="total > 10 ? true : false">
          <el-pagination @current-change="handeCurrent" :current-page="params.pageNum"
            :page-size="params.pageSize" layout="total,prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </div>
      <!-- 右边区域 -->
      <div class="new-right">
        <div class="news-label" style="padding: 23px 0px">
          <div class="label-item f-c-st">
            <div class="label-item-text">即时新闻</div>
            <div class="f-c-c">
              <img src="../assets/ggdfx.png" alt="" />
            </div>
          </div>
        </div>
        <div>
          <div class="new-item">
            <!-- 小红点 -->
            <div class="spot"></div>
            <!-- 图片 -->
            <div v-if="breakNews.articleClass == 2" class="el-img" style="width: 20px; height: 15px; margin-right: 10px">
              <img src="../assets/images/video-icon.png" alt="" class="el-image__inner" style="object-fit: cover" />
            </div>
            <!-- 字体 -->
            <div class="img-text">
              {{ breakNews.title }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getArticleTop, getNavigationContext } from "../api/index";
import Loading from "../components/loading.vue";
import BreadCrumb from "../components/bread-crumb.vue";
export default {
  //
  components:{
    Loading,
    BreadCrumb
  },
  data() {
    return {
      indexId: this.$route.query,
      // 接收数据的数组
      sreachList: [],
      // 总共有多少数据
      total: 1,
      // 即时新闻
      breakNews: {},
      //请求参数s
      params: {
        // 当前页数
        pageNum: 1,
        // 每页显示多少数据
        pageSize: 10,
        isAsc: "desc",
        orderByColumn: "createTime",
      },
      top: 0,
    };
  },
  created() { },
  methods: {
    // 监听页码改变事件，
    handeCurrent(value) {
      this.sreachList.splice(0)
      this.params.pageNum = value;
      // 改变之后就要重新获取数据
      this.getList(this.params);
    },
    // 设置监听，在页面渲染之前进行设置不同数据的进入
    Routeguard(value) {
      // 发起请求
      this.$router.push("/News?name=" + value);
      this.params.title = value;
      this.getList(this.params);
    },
    getList(params) {
      getNavigationContext(params)
        .then(async (res) => {
          let result = await res.rows;
          let tatal = await res.total;
          this.total = tatal;
          this.sreachList = result;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 点击进行跳转
    getpush(value, art) {
      if (art != 2) {
        this.$router.push({ path: '/NewsDetails', query: { tid: value } })
      } else if (art == 2) {
        this.$router.push({ path: '/ClassVideo', query: { tid: value } })
      }
    }
  },
  //
  mounted() {
    this.Routeguard(this.indexId.name);
    let data = this.params;
    data.title = "要闻聚焦";
    getArticleTop(data)
      .then((res) => {
        this.breakNews = res.data;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  updated() {
    this.indexId = this.$route.query;
    this.$toTop()
  },
  watch: {
    "indexId.name"(newValue) {
      this.Routeguard(newValue);
      this.params.pageNum = 1;
      return (this.indexId.name = newValue);
    },

  },
};
</script>
<style lang="less" scoped>
.pagination-container {
  margin: 32px 16px;
}

.content {
  width: 1200px;
  margin: 0 auto;

  .new-left {
    width: 830px;
  }

  // 右边区域
  .new-right {
    width: 310px;

    .news-label {
      margin-top: 36px;

      .label-item {
        width: 310px;

        .label-item-text {
          font-family: NotoSansHans-Light;
          font-size: 22px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 40px;
          letter-spacing: 0px;
          color: #000000;
          margin-right: 19px;
        }
      }
    }

    .new-item {
      position: relative;
      margin-bottom: 10px;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .spot {
        background-color: red;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin-right: 10px;
      }

      .el-img {
        position: relative;
        display: inline-block;
        overflow: hidden;

        .el-image__inner {
          vertical-align: top;
        }
      }

      .img-text {
        width: 293px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-size: 16px;
        font-family: Noto Sans S Chinese;
        font-weight: 400;
        color: #000000;
      }
    }
  }
}

.search-content {
  width: 830px;
  cursor: pointer;

  .right-content {
    border-bottom: 1px solid #f4f4f4;

    .right-content-title {
      width: 100%;
      font-size: 20px;
      font-family: NotoSansHans-Bold;
      font-weight: normal;
      font-stretch: normal;
      line-height: 68px;
      letter-spacing: 0;
      color: black;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

    .news-footer {
      width: 100%;
      height: 40px;
      font-family: NotoSansHans-Regular;
      font-size: 14px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 40px;
      letter-spacing: 0;
      color: #808080;
    }
  }
}

</style>